<template>
  <div>
    <!-- 头部 -->
    <Header :list="list" @addTask="addTask" @allChecked="allChecked" />
    <!-- 列表 -->
    <List :list="showList" @change="edit" @remove="remove" />
    <!-- 底部 -->
    <Footer :list="list" @stateChange="stateChange" @removeComplete='removeComplete' />
  </div>
</template>

<script>
import Header from "./components/Header.vue";
import List from "./components/List.vue";
import Footer from "./components/Footer.vue";

export default {
  data() {
    return {
      list: JSON.parse(localStorage.getItem('list')||'[]'),
      currentState: "all",
    };
  },
  watch:{
    list:{
      handler(newVal,oldVal){
        localStorage.setItem('list',JSON.stringify(newVal))
      },
      deep:true
    }
  },
  components: {
    Header,
    List,
    Footer,
  },
  methods: {
    removeComplete(){
      this.list=this.list.filter(e=>!e.isDone)
    },
    allChecked(checked) {
      this.list.forEach((e) => {
        e.isDone = checked;
      });
    },
    // 修改状态
    edit(id) {
      const findRes = this.list.find((e) => e.id === id);
      if (!!findRes) {
        findRes.isDone = !findRes.isDone;
      }
    },
    // 添加
    addTask(name) {
      const task = {
        id: this.list.length > 0 ? this.list[this.list.length - 1].id + 1 : 1,
        name,
        isDone: false,
      };
      this.list.push(task);
    },
    // 删除
    remove(id) {
      this.list = this.list.filter((e) => e.id !== id);
    },
    stateChange(name) {
      this.currentState = name;
    },
  },
  computed: {
    showList() {
      switch (this.currentState) {
     
        case "incomplete":
          return this.list.filter((e) => !e.isDone);
        case "complete":
          return this.list.filter((e) => e.isDone);
        default:
          return this.list;
      }
    },
  },
};
</script>

<style lang="less" scoped>
</style>
